<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电商大数据管理平台</title>
    <link rel="icon" href="icon.ico">
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css"/>
    <!--[if lt IE 9]>
    <script src="plugins/html5shiv/html5shiv.min.js"></script>
    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="app">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </strong></a>
            </div>
            <navbars :acv='bnav'></navbars>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row" id="show">
            <datanav></datanav>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div>
                    <div class="row">
                        <div class="col-xs-8">
                            <h2 style="color: #0D81F5;"><b>季度分析报告</b></h2>
                        </div>
                    </div>
                    <!--开始-->
                    <div class="row placeholders alert alert-info" style="padding-top: 10px;padding-bottom: 10px;">
                        <div class="col-xs-12 text-center">
                            <span>区域选择：</span>
                            <el-select v-model="value" placeholder="市级" style="width:110px;">
                                <el-option v-for="item in options" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="value2" placeholder="区县" style="width:110px;">
                                <el-option v-for="item in options2" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span>时间选择：</span>
                            <el-select v-model="value3" placeholder="年度" style="width:110px;">
                                <el-option v-for="item in options3" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>

                            <el-select v-model="value4" placeholder="季度" style="width:110px;">
                                <el-option v-for="item in options4" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>

                            <div class="btn-group" style="padding-left: 100px;">
                                <button type="button" onclick="stamp()" value="打印报告">打印预览</button>
                            </div>
                        </div>
                    </div>
                    <div style="padding-left: 50px;padding-right: 50px;">
                        <h2 class="sub-header text-center">铜仁市电子商务发展分析报告</h2>
                        <p style="margin-bottom:40px">
                        <p><b>一、总体情况</b>（图文，样本为本季度汇总、上季度汇总数据、上年同期汇总数据）</p>
                        <p>
                            <!-- 加载编辑器的容器 -->
                            <script id="container1" name="content" type="text/plain" name="content"></script>
                        </p>
                        </br>
                        </br>
                        <p><b>二、独立分析</b>（图文，样本为本季度按月明细、上季度按月明细、上年同期按月明细）</p>
                        <p>（一）平台</p>

                        <p>（1）平台统计（本地和外部增减情况、用户量、访问量、销售总额、转化率）</p>
                        <p>
                            <!-- 加载编辑器的容器 -->
                            <script id="container2" name="content" type="text/plain" name="content"></script>
                        </p>
                        </br>
                        </br>
                        <p>（二）产品（产品各平台销售、产品客户分布及群体分析）</p>
                        <p>
                            <!-- 加载编辑器的容器 -->
                            <script id="container3" name="content" type="text/plain" name="content"></script>
                        </p>
                        </br>
                        </br>
                        <p>（三）主体（各平台经营主体分布、经营状况、增值性）</p>
                        <p>
                            <!-- 加载编辑器的容器 -->
                            <script id="container4" name="content" type="text/plain" name="content"></script>
                        </p>
                        </br>
                        </br>
                        <p><b>三、工作建议</b>（季度分析总结、工作难点总结、工作重点提炼、下季度工作建议）</p>
                        <p class="help-block">
                            根据以上分析结果，分别从品牌打造、宣传推广、销售转化、主体培育等方面做总结，并结合铜仁电商发展指标任务、提出相应策略建议便于下一季度的工作开展。</p>
                        <p>
                            <!-- 加载编辑器的容器 -->
                            <script id="container5" name="content" type="text/plain" name="content"></script>
                        </p>
                    </div>
                    </br>
                    <button class="btn btn-lg btn-info btn-block" onclick="stamp()">生成报告预览</button>

                </div>
            </div>
            <!--结束-->
            <br/><br/><br/><br/>
        </div>
        <div id="dayin" style="padding-top: 100px;padding-bottom: 100px;">
            <p align="center">
                <button type="button" onclick="stamps()" value="打印报告">打印报告</button>
                <button type="button" onclick="stampss()" value="打印报告">取消</button>
            </p>
            <div id="dayins" style="padding-left: 100px;padding-right: 100px; ">
                <h2 style="text-align:center" class="sub-header text-center">铜仁市电子商务发展分析报告</h2>
                <p style="margin-bottom:40px">
                <p><b>一、总体情况</b></p>
                <p>
                <div id="cont1"></div>
                </p>
                </br>
                </br>
                <p><b>二、独立分析</b></p>
                <p>（一）平台</p>
                <p>
                    <!-- 加载编辑器的容器 -->
                <div id="cont2"></div>
                </p>
                </br>
                </br>
                <p>（二）产品</p>
                <p>
                    <!-- 加载编辑器的容器 -->
                <div id="cont3"></div>
                </p>
                </br>
                </br>
                <p>（三）主体</p>
                <p>
                    <!-- 加载编辑器的容器 -->
                <div id="cont4"></div>
                </p>
                </br>
                </br>
                <p><b>三、工作建议</b></p>
                <p>
                    <!-- 加载编辑器的容器 -->
                <div id="cont5"></div>
                </p>
            </div>
        </div>
    </div>
</div>
</div>


<div style="padding-top: 150px" class="modal fade" id="uploadImg" tabindex="-1" data-backdrop="static" role="dialog"
     aria-labelledby="selectCateModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">上传图片</h4>
            </div>
            <div class="modal-body">
                <div id="imgUploadWrapper"></div>
            </div>
            <div class="modal-footer">
                <button type="button" id="uploadImgConfirm" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script src="plugins/element-ui/index.js"></script>

<script src="js/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="js/ueditor-1.4.3.3/ueditor.all.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script src="js/common.js"></script>

<!-- plupload -->
<script src="js/plupload/crypto.js"></script>
<script src="js/plupload/hmac.js"></script>
<script src="js/plupload/sha1.js"></script>
<script src="js/plupload/base64.js"></script>
<script src="js/plupload/plupload.full.min.js"></script>
<script src="js/plupload/upload.js"></script>
<script>
    var dataTemplate = {
        "id": "",
        "generalSituation": "",//总体情况
        "platformStatistics": "",//平台统计
        "productAnalysis": "",//产品分析
        "subjectAnalysis": "",//主体分析
        "workProposal": "",//工作建议
        "quarter": ""//季度
    };
    //数据报告对象
    var dataObj = dataTemplate;
    var ue1,//总体情况
        ue2,//平台统计
        ue3,//产品分析
        ue4,//主体分析
        ue5;//工作建议
    ueEditorInit();
    $(window).ready(function () {
        "use strict";
        var obj1 = document.getElementById("dayin");
        obj1.style.display = "none";
        dataObj.quarter = GetQueryString('data');//季度
        loadDataReport();//加载当前季度的数据报告
    });
    function ueEditorInit() {
        ue1 = UE.getEditor('container1');
        ue2 = UE.getEditor('container2');
        ue3 = UE.getEditor('container3');
        ue4 = UE.getEditor('container4');
        ue5 = UE.getEditor('container5');

        baidu.editor.commands['imgupload'] = {
            execCommand: function () {
                var exec = this;

                $("#uploadImg").modal("show");

                var ossfile = $("#imgUploadWrapper").imgUpload();
                $("#uploadImgConfirm").on("click", function (e) {
                    var imgHtml = "";
                    if (typeof ossfile.uploaded != 'undefined' && ossfile.uploaded.length > 0) {
                        for (var i = 0; i < ossfile.uploaded.length; i++) {
                            imgHtml += '<img src="' + ossfile.uploaded[i] + '">';
                        }
                    }
                    exec.execCommand('insertHtml', imgHtml);

                    $("#uploadImg").modal("hide");

                    return true;
                });
            },
            queryCommandState: function () {
            }
        };

    }


    //图片
    var client = new OSS.Wrapper({
        region: oss.region,
        accessKeyId: oss.accessKeyId,
        accessKeySecret: oss.accessKeySecret,
        bucket: oss.bucket
    });
    document.getElementById('fileName').addEventListener('change', function (e) {
        var file = e.target.files[0];
        var storeAs = "headImg/" + getUuid() + ".jpg";
        console.log(file.name + ' => ' + storeAs);
        client.multipartUpload(storeAs, file).then(function (result) {
            var uploadPath = "http://" + oss.bucket + ".oss-cn-shenzhen.aliyuncs.com/" + storeAs;
            console.log(uploadPath);
            $("[name=img]").attr("src", uploadPath);
        }).catch(function (err) {
            console.log(err);
        });

        function getUuid() {
            var len = 32;//32长度
            var radix = 16;//16进制
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [], i;
            radix = radix || chars.length;
            if (len) {
                for (i = 0; i < len; i++)uuid[i] = chars[0 | Math.random() * radix];
            } else {
                var r;
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random() * 16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }
            return uuid.join('');
        }
    });

</script>
<script>
    function stamp() {
        //获取数据报告的内容
        var sText1 = ue1.getContent();
        var sText2 = ue2.getContent();
        var sText3 = ue3.getContent();
        var sText4 = ue4.getContent();
        var sText5 = ue5.getContent();
        //设置数据报告对象
        dataObj.generalSituation = sText1;
        dataObj.platformStatistics = sText2;
        dataObj.productAnalysis = sText3;
        dataObj.subjectAnalysis = sText4;
        dataObj.workProposal = sText5;
        //保存数据报告
        saveDataReport();
        document.getElementById("cont1").innerHTML = sText1;
        document.getElementById("cont2").innerHTML = sText2;
        document.getElementById("cont3").innerHTML = sText3;
        document.getElementById("cont4").innerHTML = sText4;
        document.getElementById("cont5").innerHTML = sText5;
        var obj = document.getElementById("show");
        obj.style.display = "none";
        var obj1 = document.getElementById("dayin");
        obj1.style.display = "block";
    }
    function stamps() {
        var newstr = document.getElementById("dayins").innerHTML;
        var oldstr = document.body.innerHTML;   //保存原先网页的代码
        document.body.innerHTML = newstr; //将网页内容更改成需要打印
        window.print();
        document.body.innerHTML = oldstr;
    }
    function stampss() {
        var obj = document.getElementById("show");
        obj.style.display = "block";
        var obj1 = document.getElementById("dayin");
        obj1.style.display = "none";
    }
    //查询数据报告
    function loadDataReport() {
        $.ajax({
            url: '/ebb/datareport/',
            type: 'get',
            data: {'index': 1, 'size': 10, 'quarter': dataObj.quarter},
            success: function (result) {
                //设置数据报告对象
                dataObj = result.data.length > 0 ? result.data[0] : dataTemplate;
                //总体情况
                ue1.addListener("ready", function () {
                    ue1.setContent(dataObj.generalSituation);
                });
                //平台统计
                ue2.addListener("ready", function () {
                    ue2.setContent(dataObj.platformStatistics);
                });
                //产品分析
                ue3.addListener("ready", function () {
                    ue3.setContent(dataObj.productAnalysis);
                });
                //主体分析
                ue4.addListener("ready", function () {
                    ue4.setContent(dataObj.subjectAnalysis);
                });
                //工作建议
                ue5.addListener("ready", function () {
                    ue5.setContent(dataObj.workProposal);
                });
                ue1.setContent(dataObj.generalSituation);
                ue2.setContent(dataObj.platformStatistics);
                ue3.setContent(dataObj.productAnalysis);
                ue4.setContent(dataObj.subjectAnalysis);
                ue5.setContent(dataObj.workProposal);
            }
        });
    }
    //保存数据报告
    function saveDataReport() {
        if (!dataObj.id) {//如果ID为空，新增
            $.ajax({
                url: '/ebb/datareport/',
                type: 'post',
                data: JSON.stringify(dataObj),
                contentType: "application/json",
                success: function (result) {
                    console.log("报表生成成功！");
                }
            });
        } else {//否则，更新
            $.ajax({
                url: '/ebb/datareport/',
                type: 'put',
                data: JSON.stringify(dataObj),
                contentType: "application/json",
                success: function (result) {
                    console.log("报表生成成功！");
                }
            });
        }

    }
    new Vue({
        el: "#app",
        data: {
            bnav: {
                number: 4,
            },
            options: [{
                value: '1',
                label: '全部'
            }, {
                value: '2',
                label: '铜仁'
            }, {
                value: '3',
                label: '黔南'
            }, {
                value: '4',
                label: '六盘水'
            }, {
                value: '5',
                label: '贵阳'
            }, {
                value: '6',
                label: '毕节'
            }],
            options2: [{
                value: '1',
                label: '全部'
            }, {
                value: '2',
                label: '碧江区'
            }, {
                value: '3',
                label: '万山区'
            }, {
                value: '4',
                label: '松桃县'
            }, {
                value: '5',
                label: '沿河县'
            }, {
                value: '6',
                label: '江口县'
            }],
            options3: [{
                value: '2017',
                label: '2017'
            }, {
                value: '2016',
                label: '2016'
            }],
            options4: [{
                value: '1',
                label: '第一季度'
            }, {
                value: '2',
                label: '第二季度'
            }, {
                value: '3',
                label: '第三季度'
            }, {
                value: '4',
                label: '第四季度'
            }],
            value: '1',
            value2: '1',
            value3: '2017',
            value4: '1',
        },
        computed: {},
        mounted: function () {

        },
        methods: {},
        watch: {
            value3: function (value) {
                dataObj.quarter = value + '-' + 1;//设置查询参数
                loadDataReport();
            },
            value4: function (value) {
                var year = this.value3;
                dataObj.quarter = year + '-' + value;//设置查询参数
                loadDataReport()
            }
        }
    });

</script>
</body>

</html>